Utility First
予め
UI Framework
によって定義された汎用的なスタイルクラスやプロパティを組み合わせて
UI
を構築する手法
コンポーネント指向
との相性が良い
課題が解消された
inline styles インラインスタイル
風な記述ができる
inline stylesの従来の課題をUtility Firstな考えで解消
a
観点
CSS Bundleとパフォーマンス
人力
CSS Architecture 設計手法
の全ページ用
bundle CSS
>
Utility First
な全ページ用
bundle CSS
> 各ページごとに用意された
bundle CSS
customize カスタマイズ性
Design Tokens
や独自スタイルの設定しやすさ
Web Standards
へのキャッチアップ速度
Design デザイン
チームとのコミュニケーション
Utility Firstを破った
Design デザイン
に対し、どう対処するか?
JavaScript
の扱い
Chakra UI
だと
Emotion
ありで、runtimeありなスタイルでPerformanceに影響ある。
inline styles インラインスタイル
で展開する際の出力
Devtoolでデバッグしにくくない?
独自記法の
入力補完
あるか?
賛否両論
間違い:
CSS
を覚えなくていい
utility class
は、ほとんど
CSS
の値と名前同じ
むしろ、CSSを理解している人からは、独自
utility class
の名前を覚えるのが面倒
uiライブラリのclass名覚えても知識の
携帯性 portability
低いし
賛否両論:
naming semantic class クラスの命名
からの開放
実際は
Component コンポーネント code
の命名を行うので、それほど開放されたわけでない。
意見/感想
完全開放みたいな意見言っている人もいるが、一定期間メンテしたり、多くの人が触るプロダクトの場合、全て
inline styles インラインスタイル
だと
可読性 readability
が下がるので、以下を行ってほしい。
Component コンポーネント code
の粒度を小さく
変数化、パターン化して命名
従来の
naming semantic class クラスの命名
と比較すると
Component コンポーネント code
化されない引力が働く点に注意
CSS Utility Classes and "Separation of Concerns"
Tailwind CSS
作者の人の記事
ノーマルなCSSから
Tailwind CSS
の考え方に遷移していく流れが面白い
Utility-First Fundamentals - Tailwind CSS
Tailwind CSS
公式の基本コンセプト記事